<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构性伪类-子元素伪类</title>
    <style type="text/css">
        div li:first-child{
            color: #009900;
        }
        div li:last-child{
            color: #ff0000;
        }
        div li:nth-child(2n){
            color: #3444ff;
        }
        div li:nth-last-child(1){
            color: #999999;
        }
        h2:first-of-type{
            background-color: #acb451;
        }
        h2:nth-of-type(2n){
            background-color: #13b8ba;
        }
        p:only-of-type{
            background-color: #999999;
        }
        section li:nth-child(3n+1){
            background-color: #d2d2d2;
        }
        section li:nth-child(3n+2){
            background-color: #cccccc;
        }
        section li:nth-child(3n+3){
            background-color: #bbbbbb;
        }
    </style>
</head>
<body>
<h1>子元素伪类</h1>
<div>
    <ul>
        <li>结构性伪类选择符E：last-child</li>
        <li>结构性伪类选择符E：last-child</li>
        <li>结构性伪类选择符E：last-child</li>
        <li>结构性伪类选择符E：last-child</li>
        <li>结构性伪类选择符E：last-child</li>
    </ul>
</div>
<div>
    <h2>标题</h2>
    <p>内容</p>
    <h2>标题</h2>
    <p>内容</p>
    <h2>标题</h2>
    <p>内容</p>
    <h2>标题</h2>
    <p>内容</p>
</div>
<div>
    <h2>标题</h2>
    <p>内容</p>
</div>
<section>
    <ul>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
        <li>循环使用样式</li>
    </ul>
</section>
</body>
</html>